<!--菜单4：
电表实时监控菜单中的
负载趋势
数据表格-->
<template>
  <div class="MonthWarn">
    <!--        存放筛选条件-->
    <el-row class="top">
      <div class="grid-content bg-purple-light box-right">
        <el-button size="mini" class="btn" plain>导出</el-button>
      </div>
    </el-row>
    <div class="bottom">
      <div class="bottom-top">
        <span>负载均衡趋势</span>
      </div>
      <el-table
          :data="S_FZQS_dataForm_tableData"
          :cell-style="{textAlign:'center',padding:'0'}"
          :default-sort = "{prop: 'date', order: 'descending'}"
          height="900px"
          :header-cell-style="{backgroundColor:'#F5F8FF',textAlign:'center',padding:'0',width: '100%'}"
          border
      >
        <el-table-column
            prop="time"
            label="采集时间"
            sortable
            width="420px">
        </el-table-column>
        <el-table-column
            prop="name"
            label="参数名称"
            sortable
            style="text-align: center"
            width="420px">
        </el-table-column>
        <el-table-column
            prop="data"
            label="读数"
            sortable
            width="420px">
        </el-table-column>
      </el-table>
    </div>
  </div>

  <!--        存放数据-->

</template>

<script>
export default {
  name: "MonthWarn",
  data(){
    return{
      S_FZQS_dataForm_tableData: []
    }
  },
  mounted(){
    this.initFZQS_dataForm();
  },
  methods: {
    initFZQS_dataForm(){
      this.axios.get('/api/module4/FZQS_dataForm').then(resp=>{
        this.S_FZQS_dataForm_tableData=resp.data.list;
      })
    },
    //    展示指定日期区间内的数据
    queryDataFZQSform(start_date,end_date){
      this.axios.get('/api/module4/FZQS_dataForm_queryMsg',{
        params:{
          start_date:start_date,
          end_date:end_date
        }
      }).then(resp=>{
        this.S_FZQS_dataForm_tableData=resp.data.list;
      })
    }
  }
}
</script>

<style scoped>
.MonthWarn{
  width: 100%;
  height: 492px;
}
.top{
  width: 100%;
  height: 9%;
}
.bottom{
  width: 100%;
  height: 109%;
}
.bottom-top{
  background-color: #F5F8FF;
  font-size: 14px;
  color: #669A77;
  height: 30px;
  line-height: 30px;
}
.bottom-top span{
  margin-left: 10px;
}
.el-col{
  position: relative;
  top: 7px;
}
/*    日期*/
.box-left{
  margin-left: 10px;
  font-size: 12px;

}
/*平均值比较*/
.box-mid-left{
  margin-left: 10px;
  font-size: 12px;
}
.box-mid{
  margin-left: 20px;
  font-size: 12px;
}
/*    平均值的框*/
.avg{
  width: 90px;
}
/*    百分比*/
.percent{
  width: 100px;
}
/*    按钮*/
.btn{
  width: 100px;
  height: 30px;
  background-color: #F1F5F8;
  margin-left: 30px;
  border-radius: 5px;
}

.slot{
  border-radius: 50%;
  width: 10px;
  height: 10px;
  background-color: #CA180B;
  margin: 0 auto;
}
.el-table th {
  padding: 0px 0px;
  color: black;
  font-size: 12px;
  height: 10px!important;
}
.el-table__body tr,
.el-table__body td {
  padding: 0px 0px;
  height: 10px;
  line-height: 30px;
}

</style>
